<script setup>
 import { Edit,Delete } from '@element-plus/icons-vue';
 import loufangzujian from './components/loufangzujian.vue'
 import {postLouYu} from '@/api/gongs.js' //导入公司接口
 import {useKuYiStore} from '@/stores'
 import { ref } from 'vue'
import { ElMessage,ElMessageBox  } from 'element-plus';

const articleList = ref([]) //文章列表
const total=ref(0) //总条数
const loading=ref(false) //loading状态
// 弹出框的状态
const dialog=ref()
const useStore = useKuYiStore()

// 定期请求参数对象
// const params=ref({
//     pagenum:1, //当亲页
//     pagesize:5, //当前生效额每页条数
//     cate_id:'',
//     state:''
// })

// 存放所有楼宇的列表
const louyuList=ref([])

const listParams = ref({
    action: 'list',
    page: 1,
    perPage: 10
});

// 获取楼宇列表
const getArticleList = async () =>{
    try{
        loading.value = true //开启loading效果
        const res = await postLouYu(listParams.value)
        louyuList.value = res.data.data
        useStore.setLouYu(res.data.data) //将数据存入pinia
        total.value = Number(res.data.total)
        loading.value = false //关闭loading效果
        console.log(typeof(total.value));
    }catch(err){
        console.log(err);
    }
    
}
getArticleList()

// 处理分页逻辑
const handleSizeChange=(size)=>{
    console.log('当前每页条数',size);
    // 如果每页条数发生变化 就要把当前跳到第一页；并且每页条数设置成要变成的条数
    console.log('当前每页条数', size);
    listParams.value.page = 1; // 跳转到第一页
    listParams.value.perPage = size; // 设置每页条数
    // 重新渲染
    getArticleList();
}

// 分页
const handleCurrentChange=(page)=>{
    console.log('页码变化了',page);
    listParams.value.page=page
   // 重新渲染
   getArticleList()
}

// 搜索逻辑=>按照最新的搜索条件 ，重新检索 ，从第一页开始展示
// 添加楼宇
const onAddAritcle=()=>{
    // 打开dialog.value.open({})
    dialog.value.open({})
}

// 编辑楼宇 这里要根据后台是不是有数据如果有数据就是修改
const onEditArticle=(row)=>{
    dialog.value.open(row)
}

// 删除楼宇
const onDeleteArticle= async (row)=>{
    console.log(row.id);
    ElMessageBox.confirm(
    '您是否要删除该楼宇?',
    '提示！',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
        await postLouYu({
            action:'del',
            id:row.id
        })
        ElMessage.success('删除成功！')
        getArticleList()
    })
}

// 监听子组件 (添加或者编辑成功的回调)
const onsuccess=(type)=>{
    if (type === 'add') {
        // 渲染最后一页 总条数 ÷ 每页页码条数 的和 再向上取整
        const lastPage = Math.ceil((total.value + 1) / listParams.value.perPage);
        listParams.value.page = lastPage; // 更新成当前页码
    }
    getArticleList();
}
</script>

<template>
      <page-container title="">

        <template #extra>
            <el-button type="primary" @click="onAddAritcle">添加楼宇</el-button>
        </template>
        
        <!-- 表格区域 articleList = 数据源  -->
        <el-table :data="louyuList" v-loading="loading">           
            <el-table-column type="index" width="100" label="编号" />

            <el-table-column label="楼宇名称" prop="title">
                <template #default="{row}">
                    <!-- <el-link  type="primary" :underline="false">{{ row.house }}</el-link> -->
                     {{ row.building_number }}
                </template>
            </el-table-column>
            
            <el-table-column label="操作"  width="190">
                <template #default="{row}">
                    <!-- <el-button circle type="primary" plain :icon="Edit" @click="onEditArticle(row)"></el-button> -->
                    <el-button circle type="danger" plain :icon="Delete" @click="onDeleteArticle(row)"></el-button>
                </template>
            </el-table-column>

        </el-table>

        <!-- 分页区域 -->
        <!-- total, sizes -->
        <el-pagination
            v-model:current-page="listParams.page"  
            v-model:page-size="listParams.perPage"
            :page-sizes="[1, 2, 3, 4]"
             :disabled="false"
            :background="true"
            layout="prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin-top: 20px; justify-content: flex-end;"
        />

        <!-- 抽屉组件 -->
        <loufangzujian ref="dialog" @success="onsuccess"></loufangzujian>
    </page-container>
</template>

<style lang="scss" scoped>

</style>